const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/App.jsx", // 单入口
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name].[hash].js"
  },
  resolve: {
    alias: {
      "@css": path.resolve(__dirname, "../src/css/")
    },
    extensions: [".js", ".jsx", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.png|jpg|jpeg|svg|.gif$/,
        use: [
          {
            loader: "url-loader", // 转为base64
            options: {
              limit: 10000
            }
          },
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: {
                progressize: true,
                quality: 65
              },
              optipng: {
                enabled: false
              }
            }
          }
        ]
      },
      {
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["es2015", "react", "env"],
          plugins: [
            [
              "transform-runtime",
              {
                helpers: true,
                polyfill: true,
                regenerator: true,
                moduleName: "babel-runtime"
              }
            ],
            "transform-decorators-legacy",
            "transform-object-rest-spread",
            "transform-class-properties"
          ]
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      minify: {
        collapseWhitespace: true, // 压缩空白
        removeComments: true, // 移除注释
        removeAttributeQuotes: true // 移除属性的引导
      }
    }),
    new CleanWebpackPlugin(["dist"]) // 删除生成的dist目录
  ]
};
